/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = '伊夕'
const list = document.querySelector('.list')
const btn = document.querySelector('.btn ')

const btnDismiss = document.querySelector('.modal-footer .btn-primary')
const add_btn = document.querySelector('.add-btn')
const del = document.querySelector('.del')
const edit_btn= document.querySelector('.edit-btn');
const edit_form= document.querySelector('.edit-form');
// 添加弹窗控制
const addModal = new bootstrap.Modal(document.querySelector('.add-modal'))

// 编辑弹窗
const editModal = new bootstrap.Modal(document.querySelector('.edit-modal'))

// 渲染函数
function render() {
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method: 'GET',
    params: {
      creator,
    },
  }).then((res) => {
    const { data } = res

    list.innerHTML = data.data
      .map((item, index) => {
        return ` <tr>
        <td>${index + 1}</td>
        <td>${item.bookname}</td>
        <td>${item.author}</td>
        <td>${item.publisher}</td>
        <td data-id=${item.id}>
          <span class="del">删除</span>
          <span class="edit">编辑</span>
        </td>
      </tr>`
      })
      .join('')
  })
}
render()
// 添加图书
btn.addEventListener('click', function () {
  addModal.show()
})
// 取消按钮
const btnClose = document.querySelector('.btn-close')
btnClose.addEventListener('click', function () {
  addModal.hide()
})
btnDismiss.addEventListener('click', function () {
  addModal.hide()
})
// 增加图书
add_btn.addEventListener('click', function () {
  const add_form = document.querySelector('.add-form')
  const form = serialize(add_form, { hash: true, empty: true })
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method: 'POST',
    data: {
      creator,
      ...form,
    },
  }).then((res) => {
    const { data } = res
    addModal.hide()
    render()
  })
})
// 删除
list.addEventListener('click', function (e) {
  if (!e.target.classList.contains('del')) {
    return
  }

  const id = e.target.parentNode.dataset.id
  axios({
    method:'DELETE',
    url:`http://hmajax.itheima.net/api/books/${id}`,

  }).then(res=>{
    render()
  })
})

// 编辑
list.addEventListener('click',function(e){
  if(!e.target.classList.contains('edit')){
      return
  }
  const id=e.target.parentNode.dataset.id
  axios({
    url:`http://hmajax.itheima.net/api/books/${id}`,
    method:'GET'
  }).then(res=>{
    const {data:{data}}=res
    const newDate=Object.keys(data)
    console.log(newDate);
    newDate.forEach(item=>{
      document.querySelector(`.edit-form .${item}`).value=data[item]
    })


    editModal.show()
    
   

  })
  

})
edit_btn.addEventListener('click',function(){
  const {id,bookname,author,publisher}=serialize(edit_form,{hash:true,empty:true})
  
  axios({
    url:`http://hmajax.itheima.net/api/books/${id}`,
    method:'PUT',
    data:{
      bookname,
      author,
      publisher,
    }
  }).then(res=>{
   
    render()
    editModal.hide()
   
    
  })
})

/**
 * 目标2：新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据，并提交到服务器保存
 *  2.3 刷新图书列表
 */

/**
 * 目标3：删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.2 调用删除接口
 *  3.3 刷新图书列表
 */

/**
 * 目标4：编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改，并刷新列表
 */
